<template>
	<view class="new">
		<view class="nav">
			<view class="icon">
				<view class="">
					<image style="width: 15px;height: 15px;" src="../../static/转发.png" mode=""></image>
				</view>
				<view class="" @click="fan">
					<image style="width: 15px;height: 15px;" src="../../static/错叉_块.png" mode=""></image>
				</view>
			</view>
			<view class="Img">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
								:interval="interval" :duration="duration">
								<swiper-item>
									<image :src="item.img" mode=""></image>
								</swiper-item>
								<swiper-item>
									<image :src="item.img" mode=""></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<view class="cont">
				<view>{{item.name}}</view>
				<view style="font-size: 12px;display: flex;margin-bottom: 5px;" class="hint">
					<view v-for="(items,index) in hint" :key="index" style="display: flex;">
						{{items}}
					</view>
				</view>
				<view style="margin: 5px 0;font-size: 13px;color: #868686;">产品描述</view>
				<view style="color: #868686;font-size:13px ;">{{item.introduce}}</view>
			</view>
			<view class="bottom">
				<view class="" style="display: flex;justify-content: space-between;padding: 0 10px;margin: 11px 0;">
					<view>￥{{item.price}}</view>
					<view style="display: flex;align-items: center;width: 70px;justify-content: space-between;">
						<view style="width: 16px;height: 16px;background-color: #DBA871;color: white;
						display:flex;justify-content: center;align-items: center;border-radius: 100%;" @click="del">-</view>
						<view>{{num}}</view>
						<view style="width: 16px;height: 16px;background-color: #DBA871;color: white;
						display:flex;justify-content: center;align-items: center;border-radius: 100%;" @click="add">+</view>
					</view>
				</view>
				<view class="">
					<button style="width: 303px;height: 44px;background-color: #DBA871;color: white;font-size: 14px;
						border: none;line-height: 44px;" @click="addShop">加入购物袋</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: ['flag', 'close'],
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				item: '',
				num: 1,
				hint:JSON.parse(this.$store.state.ordermeal.item.hint)
			}
		},
		mounted() {
			this.item = this.$store.state.ordermeal.item
		},
		methods: {
			fan() {
				this.$emit('close', !this.flag, 1)
			},
			del() {
				if (this.num > 1) {
					this.num--
				}
			},
			add() {
				this.num++
			},
			addShop() {
				let obj = {
					img: this.item.img,
					name: this.item.name,
					price: this.item.price,
					state: this.item.state,
					hint: this.item.hint,
					introduc: this.item.introduc,
					introduce: this.item.introduce,
					checked: true,
					num: this.num
				}
				this.$store.dispatch('ordermeal/addShop', obj)
				this.$emit('close', !this.flag)
				console.log(this.$store.state.ordermeal.Shop)
				setTimeout(() => {
					this.$emit('Data', this.$store.state.ordermeal.Shop, this.$store.getters['ordermeal/ZJ'])
				}, 100)
			}
		},
	}
</script>
<style scoped>
	.new {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.nav {
		width: 335px;
		height: 494px;
		background-color: white;
		border-radius: 10px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -240px;
		margin-left: -165px;
		overflow: hidden;
	}

	.Img image {
		width: 335px;
		height: 220px;
	}

	.Img .swiper {
		height: 220px;
	}

	.icon {
		position: absolute;
		top: 10px;
		right: 0;
		z-index: 999;
		display: flex;
	}

	.icon view {
		width: 25px;
		height: 25px;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 27px;
		border-radius: 100%;
		margin-right: 10px;
	}

	.cont {
		padding: 0 10px;
		margin-top: 10px;
	}

	.hint {
		margin-top: 5px;
	}

	.hint view:nth-child(1) {
		width: 32px;
		height: 18px;
		background-color: #EEFFE8;
		color: #70B309;
		margin-right: 10px;
		display: flex;
		justify-content: center;
	}

	.hint view:nth-child(2) {
		width: 53px;
		height: 18px;
		background-color: #E9E9E9;
		color: #A9A9A9;
		margin-right: 10px;
		display: flex;
		justify-content: center;
	}

	.bottom {
		width: 100%;
		height: 100px;
		border-top: 1px solid #DCDFE6;
		position: absolute;
		bottom: 0;
	}
</style>
